<template>
	<view>
		<view class="lineClass" v-for="item in userlist" style="padding-top: 20rpx;padding-bottom: 20rpx;">
			<view class="rowBox">
				<view class="right">
					<view class="img">
						<image class="imgItem" :src='item.avatar'></image>
					</view>
					
					<view class="text">
						<view class="line-1">
							<text class="title" style="color: black;font-weight: 500;">{{item.nickname}}</text>
							<text v-if="item.is_group_learder =='1'" style="font-size: 25rpx;color: #f29100;margin-top: 10rpx;margin-left: 20rpx;">(创建人)</text>
						</view>
					</view>
					
				</view>
			</view>
				
				<view style="margin-right: 50rpx;" v-if="is_admin == '1' && item.is_group_learder !=='1'">
					<u-icon name="close-circle" size="25" color="#dd6161 " @click="removeUser(item)"></u-icon>
				</view>
				
			</view>
			
			<view v-if="is_admin == '1'" style="display: flex;flex-direction: column;align-items: center; margin-top: 100rpx;width: 100%;">
				<view class="login_btn all_text_center" @click="addGroupUser()">
					添加组成员
				</view>
				
				<view class="login_btn all_text_center" style="background: #fa3534 ;" @click="removeGroup()">
					删除聊天组
				</view>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				member_id: '',
				is_outuser: '',
				userlist:[],
				is_admin:'',
				
				gid:''
			}
		},
		onLoad(val) {
			this.token = uni.getStorageSync('chat_token') || ''
			this.member_id = uni.getStorageSync('chat_member_id') || ''
			this.is_outuser = uni.getStorageSync('chat_is_outuser') || ''
			this.gid = val.gid
		},
		onShow() {
			this.getInfo()
			this.getIsAdmin()
		},
		methods: {
			// 获取是否为管理员
			async getIsAdmin() {
				const res = await this.$myRequest({
					url: 'Chat/is_chat_admin',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						is_outuser: this.is_outuser,
						company_id: '1'
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.is_admin = res.data.datas.is_chat_admin
			},
			
			// 删除群聊
			removeGroup(){
				uni.showModal({
					title: '提示',
					content: '确定删除该群组吗?',
					success:(res)=> {
						if (res.confirm) {
							console.log('用户点击确定');
							this.removeGroup2()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async removeGroup2(){
				const res = await this.$myRequest({
					url: 'Chat/chat_group_del',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						id: this.gid,
						
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				
				uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000);
			},
			
			// 添加组成员
			addGroupUser(){
				uni.navigateTo({
					url:'GroupUserAdd?gid=' + this.gid
				})
			},
			
			// 删除成员
			removeUser(item){
				uni.showModal({
					title: '提示',
					content: '确定删除该成员吗?',
					success:(res)=> {
						if (res.confirm) {
							console.log('用户点击确定');
							this.removeUser2(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async removeUser2(item){
				const res = await this.$myRequest({
					url: 'Chat/chat_group_member_del',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						id: item.id,
						
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				
				uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.getInfo()
			},
			
			// 获取聊天组详情
			async getInfo(){
				const res = await this.$myRequest({
					url: 'Chat/chat_group_detail',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						gid: this.gid,
						is_outuser:this.is_outuser,
						
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.userlist = res.data.datas.info
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login_btn {
		width: 540rpx;
		height: 80rpx;
		background: #008BFE;
		color: #ffffff;
		box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4);
		border-radius: 12rpx;
		font-size: 36rpx;
		margin-top: 60rpx;
	}
	
	.popup_box {
		width: 500rpx;
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			margin-top: 30rpx;
			font-weight: 400;
			color: #666666;
			font-size: 32rpx;
			text-align: center;
		}

		.item {
			width: 250rpx;
			height: 120rpx;
			background-color: #40A0F2;
			border-radius: 12rpx;
			margin-top: 50rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.15);
		}

		.item2 {
			width: 250rpx;
			height: 120rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.15);
		}
	}


	.add_client {
		width: 137rpx;
		height: 137rpx;
		position: fixed;
		right: 25rpx;
		bottom: 200rpx;
		z-index: 5;
	}


	// 模块间隔断
	.space {
		width: 100%;
		height: 30rpx;
	}

	.lineClass {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		
		.rowBox {
			display: flex;
			justify-content: flex-start;
		
			.right {
				display: flex;
				align-items: center;
				margin-left: 50rpx;
		
				.img {
					position: relative;
		
					.imgItem {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
		
					.jiaobiao {
						width: 48rpx;
						height: 35rpx;
						border-radius: 35rpx;
						background-color: #ff5c24;
						color: #ffffff;
						position: absolute;
						top: -20rpx;
						right: 0rpx;
						text-align: center;
						font-size: 24rpx;
					}
				}
		
				.text {
					margin-left: 20rpx;
		
					.line-1 {
						display: flex;
						flex-direction: row;
		
						.title {
							margin-left: 10rpx;
							font-size: 34rpx;
							font-weight: 700;
							color: #bf9035;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
		
						.time {
							display: flex;
							justify-content: end;
							font-size: 24rpx;
							color: #999999;
							margin-left: 80rpx;
						}
		
					}
		
					.info {
						color: #666;
						font-size: 28rpx;
						width: 450rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

	}

	

</style>
